<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	    .container{display: flex;}
		
		.container div{ 
			           
			           display: block;
			           margin: 0px 5px;
			           
		              }
		button{
			   float: left;
			   border: 1px solid #eee;
			   background: white;
			   border-right: none;
			   }
		button:first-child{border-radius: 5px 0 0 5px;}
		button:last-child{border-radius: 0 5px 5px 0;
							border-right:1px solid #eee; }
	   
	    /*.container>div:last-child>button{border-radius: 5px;}*/
			  	    
	</style>
</head>
<body>
	<div class="container">
	<div class="btBox">
		<button>1</button>
		<button>2</button>
		<button>3</button>
		<button>4</button>
	</div>
	<div class="btBox">
		<button>1</button>
		<button>2</button>
		<button>3</button>
		<button>4</button>
	</div>
	<div class="btBox">
		<button>1</button>
		<button>2</button>
		<button>3</button>
	</div>
	<div class="btBox">
		<button>1</button>
	</div>
    <div class="btBox">
		<button>1</button>
		<button>2</button>
		<button>3</button>
	</div>
	<div class="btBox">
		<button>1</button>
	</div>
	</div>
</body>
	<script type="text/javascript">
		var div=document.getElementsByClassName('btBox')
		function fn(){
			for(var i=0;i<div.length;i++){
				
		        var bt=document.getElementsByClassName('btBox')[i].getElementsByTagName('button')
		        console.log('bt')
		        for(var k=0;k<bt.length;k++){
		        	if (bt.length==1) {
		        		bt[k].style.borderRadius='5px'
		        	}
		        }
		        
				
			}
		}
		fn()
	</script>
</html>